Hover এবং Click Events যুক্ত করা

Chart.js এর মাধ্যমে আপনি Hover এবং Click Events ব্যবহার করে চার্টে ইন্টার‌্যাকটিভিটি যোগ করতে পারেন। এই ইভেন্টগুলোর মাধ্যমে ব্যবহারকারী ডেটার সাথে ইন্টার‌্যাক্ট করতে পারেন, যেমন কোনো পয়েন্ট বা বুদবুদে হোভার বা ক্লিক করার মাধ্যমে ডেটার আরও বিশদ দেখতে পারেন।

Chart.js এ হোভার এবং ক্লিক ইভেন্ট গুলি onHover এবং onClick ফাংশন দ্বারা কাস্টমাইজ করা যায়।

Hover Event

Hover ইভেন্ট ব্যবহারকারীর মাউসের মাধ্যমে কোনো ডেটা পয়েন্টের উপরে আসলে ট্রিগার হয়। এই ইভেন্টে আপনি ব্যবহারকারীর মাউস পয়েন্টারের অবস্থান অনুযায়ী বিভিন্ন ধরণের কাজ করতে পারেন, যেমন টুলটিপের পরিবর্তন বা কোনো কাস্টম ইফেক্ট যোগ করা।

উদাহরণ: Hover Event দিয়ে টুলটিপ কাস্টমাইজ করা

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // বার চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2],
            backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple']
        }]
    },
    options: {
        responsive: true,
        plugins: {
            tooltip: {
                enabled: true,
                mode: 'nearest',
                position: 'nearest'
            }
        },
        // Hover Event কাস্টমাইজেশন
        hover: {
            onHover: function (event, chartElement) {
                if (chartElement.length) {
                    // ব্যবহারকারী যখন পয়েন্টে হোভার করবেন, তখন টুলটিপ প্রদর্শন হবে
                    console.log('Hovered over:', chartElement[0]);
                    event.target.style.cursor = 'pointer';  // মাউস পয়েন্টার পরিবর্তন
                } else {
                    event.target.style.cursor = 'default'; // মাউস পয়েন্টার ডিফল্ট অবস্থায় থাকবে
                }
            }
        }
    }
});

এখানে:

• onHover ফাংশন ব্যবহারকারীর মাউস পয়েন্টার এক্স ও ওয়াই পজিশন অনুযায়ী ট্রিগার হয়।
• event.target.style.cursor দিয়ে মাউস পয়েন্টার পরিবর্তন করা হচ্ছে।

Click Event

Click ইভেন্ট ব্যবহারকারী যখন চার্টে কোনো পয়েন্টে ক্লিক করেন, তখন ট্রিগার হয়। এই ইভেন্টের মাধ্যমে আপনি ব্যবহারকারীকে কোনো নির্দিষ্ট ডেটা বা অন্যান্য তথ্য প্রদর্শন করতে পারেন।

উদাহরণ: Click Event দিয়ে ডেটা পয়েন্টের বিস্তারিত দেখানো

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'bar', // বার চার্ট
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
        datasets: [{
            label: 'Votes',
            data: [12, 19, 3, 5, 2],
            backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple']
        }]
    },
    options: {
        responsive: true,
        onClick: function (event, chartElement) {
            if (chartElement.length) {
                const index = chartElement[0].index; // clicked bar index
                const label = this.data.labels[index]; // clicked label
                const value = this.data.datasets[0].data[index]; // clicked value
                console.log(`You clicked on ${label} with value ${value}`);
                alert(`You clicked on ${label} with value ${value}`);
            }
        }
    }
});

এখানে:

• onClick ইভেন্ট ব্যবহার করা হয়েছে যা ক্লিক করা পয়েন্টের ডেটা নিয়ে কাজ করবে।
• chartElement[0].index ব্যবহার করে কোন বারে ক্লিক করা হয়েছে তা সনাক্ত করা হচ্ছে।

Hover এবং Click Events একসাথে ব্যবহার করা

Chart.js-এ আপনি একই চার্টে Hover এবং Click ইভেন্ট একসাথে ব্যবহার করতে পারেন, যাতে আপনি দুটি ইন্টার‌্যাকশন একসাথে কাস্টমাইজ করতে পারেন।

উদাহরণ: Hover এবং Click Events একসাথে কাস্টমাইজ করা

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'line', // লাইন চার্ট
    data: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
            label: 'Monthly Sales',
            data: [30, 45, 70, 90, 100],
            borderColor: 'rgba(75, 192, 192, 1)',
            fill: false
        }]
    },
    options: {
        responsive: true,
        plugins: {
            tooltip: {
                enabled: true
            }
        },
        hover: {
            onHover: function (event, chartElement) {
                if (chartElement.length) {
                    event.target.style.cursor = 'pointer'; // মাউস পয়েন্টার পরিবর্তন
                } else {
                    event.target.style.cursor = 'default';
                }
            }
        },
        onClick: function (event, chartElement) {
            if (chartElement.length) {
                const index = chartElement[0].index;
                const label = this.data.labels[index];
                const value = this.data.datasets[0].data[index];
                alert(`You clicked on ${label} with value ${value}`);
            }
        }
    }
});

এখানে:

• onHover এবং onClick ইভেন্ট দুইটি একসাথে ব্যবহার করা হয়েছে।
• hover ব্যবহারকারী যখন মাউস পয়েন্টার নিয়ে আসে তখন ইন্টার‌্যাকশন হবে।
• click ব্যবহারকারী ক্লিক করলে পয়েন্টের মান এবং লেবেল প্রদর্শিত হবে।

সারাংশ

Chart.js-এ Hover এবং Click ইভেন্টের মাধ্যমে আপনি চার্টের ইন্টার‌্যাক্টিভিটি কাস্টমাইজ করতে পারেন।

• Hover ইভেন্টটি মাউস পয়েন্টারের অবস্থান অনুসারে ট্রিগার হয় এবং টুলটিপ বা পয়েন্টের উপর কাস্টম ইফেক্ট তৈরি করা যায়।
• Click ইভেন্টটি যখন ব্যবহারকারী চার্টে ক্লিক করেন তখন নির্দিষ্ট পয়েন্টের ডেটা প্রদর্শন করা যায়।

এই ইভেন্টগুলোর মাধ্যমে Chart.js এর চার্ট আরও ইন্টার‌্যাক্টিভ এবং ব্যবহারকারী-বান্ধব হয়ে ওঠে।